<template>
    <div class="searchBox">
        <i class="iconfont icon-sousuo"></i>
        <input v-model="keywords" ref="searchEle" type="search" :placeholder="placeholder" @keyup.enter="search" @input="getVal($event)">
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,watch } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        modelValue:String,
        placeholder:String
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            keywords:props.modelValue
        })

        watch(()=>props.modelValue,(n,o)=>{
            state.keywords = n
        })

        const search = ()=>{
            proxy.$refs.searchEle.blur()
            context.emit('search',state.keywords)
        }

        const getVal = e => {
            context.emit('update:modelValue', e.target.value)
        }

        return{
            ...toRefs(state),
            search,
            getVal
        }
    }
}
</script>

<style lang="scss" scoped>
    .searchBox{
        display: flex;
        align-items: center;
        height: 80px;
        border-radius:40px ;
        border: 2px solid var(--baseColor);
        padding: 0 0 0 28px;
        i{
            font-size: 40px;
            color: var(--baseColor);
            font-weight: 700;
        }
        input{
            flex: 1;
            border: 0;
            background: none;
            font-weight: 500;
            font-size: 28px;
            height: 80px;
            line-height: 36px;
            color: var(--baseColor);
            padding: 0 0 0 10px;
            &::-webkit-input-placeholder { /* Edge */
                color: rgba(255, 255, 255, 0.5);
            }
            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: rgba(255, 255, 255, 0.5);
            }
            &::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
</style>